<template>
  <div class="distribution-fund">
    <c-title :text="text"></c-title>
    <div class="head">
      <div class="head-top">
        <van-image v-if="avatar_image" width="3.4375rem" height="3.4375rem" :src="avatar_image" round />
        <div class="head-top-left">
          <span class="member-name" v-if="nickname">{{ nickname }}</span>
          <span class="level" v-if="level_name">{{ level_name }}</span>
        </div>
      </div>
      <div class="content">
        <div class="content-mount">
          <span class="content-title">{{ sum_commission }}</span>
          <span class="content-desc">已结算分红</span>
        </div>
        <div class="content-mount" @click="goto">
          <div class="content-title">{{ sum_redpack }}<div class="get">领取</div>
          </div>
          <span class="content-desc">红包金额></span>

        </div>
      </div>
    </div>
    <div class="schedule">
      <div class="title">业绩等级升级进度</div>
      <div v-for="(item, index) in list" :key="index" class="schedule-box">
        <div class="desc">
          <div class="total-team">{{ item.type_desc }}</div>
          <div class="progress-bar" v-if="!full_level">
            <div style="position: relative">
              <van-progress pivot-text="" color="#FF8924" :percentage="progress_value(item.need, item.actual)" />
              <div class="round-start"></div>
              <div class="round-start-bg"></div>
            </div>
            <div class="box">
              <span class="name">{{ next_level_name }}</span>
              <span class="condition">满{{ item.need }}元</span>
            </div>
            <div class="current-box" :style="progress_style(item.need, item.actual)">当前{{ item.actual }}元</div>

          </div>
          <div class="progress-bar" v-else>
            <div class="full_level">
              <van-progress pivot-text="" color="#FF8924" percentage="100" />
              <div class="full-round-start"></div>
              <div class="full-round-start-bg"></div>
            </div>
            <div class="full_level_box left-100">
              <span class="name">{{ next_level_name }}</span>
              <span class="condition">满{{ item.need }}</span>
            </div>
            <div class="current-box left-100">当前{{ item.actual }}元</div>
          </div>
          <div style="width:1.875rem;flex-shrink: 0;height: 1.5625rem;"></div>
        </div>
      </div>
    </div>

    <div class="foot">
      <van-tabs v-model="active" title-active-color="#FF8924" @click="toggle">
        <van-tab title="佣金记录">
          <div class="tips">
            <p>分红收入=公司整体销售额*级别对应分红比例*占比</p>
          </div>
          <van-cell v-for="(item, i) in commission_list" :key="i" center title-style="text-align:left">
            <span slot="title">奖励序号：{{ item.id }}</span>
            <span slot="label" class="label">{{ item.created_at }}</span>
            <span slot="default" class="right-value">{{ $i18n.t('money') }}{{ item.amount }}</span>
          </van-cell>
        </van-tab>
        <van-tab title="红包记录">
          <van-cell v-for="(item, i) in red_packet_list" :key="i" center title-style="text-align:left">
            <span slot="title">奖励序号：{{ item.id }}</span>
            <span slot="label" class="label">{{ item.created_at }}</span>
            <span slot="default" class="right-value">{{ $i18n.t('money') }}{{ item.amount }}</span>
          </van-cell>
        </van-tab>
      </van-tabs>
    </div>

    <div style="height: 2.4063rem;"></div>
  </div>
</template>

<script>
import { Image as VanImage, Dialog } from 'vant';
import { scrollMixin } from '../../../utils/mixin';
export default {
  components: { VanImage },
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      text: "",

      level_name: "",
      avatar_image: '',
      sum_commission: 0,
      nickname: "",
      sum_redpack: 0,
      list: [],
      level_id: 0,
      next_level_name: "",


      commission_list: [],
      red_packet_list: [],

      full_level: false,
      page: 1,
      total_page: 1,
      isLoadMore: true,

    };
  },
  activated() {
    this.full_level = false;
    this.getFrontend();
    this.getCommission();

  },
  methods: {
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      if (this.active == 0) {
        this.getCommission(page);
      } else {
        this.getMemberList(page);
      }
    },
    toggle() {
      this.page = 1;
      if (this.active == 0) {
        this.getCommission(1);
      } else {
        this.getMemberList(1);
      }
    },
    getMemberList(page = 1) {
      $http.get("plugin.commission-performance.frontend.redpack.memberList", { page }, "").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg)
        }
        this.isLoadMore = true;
        if (res.result !== 1) {
          return;
        }
        let data = res.data.list;
        if (data.current_page == 1) {
          this.red_packet_list = data.data;
        } else {
          this.red_packet_list = this.red_packet_list.concat(data.data);
        }
        this.page = data.current_page;
        this.total_page = data.last_page;
      })
    },
    getCommission(page = 1) {
      $http.get("plugin.commission-performance.frontend.commission.getList", { page }, "").then(res => {
        this.isLoadMore = true;
        if (res.result !== 1) {
          return;
        }
        let data = res.data.list;
        if (data.current_page == 1) {
          this.commission_list = data.data;
        } else {
          this.commission_list = this.commission_list.concat(data.data);
        }
        this.page = data.current_page;
        this.total_page = data.last_page;
      })
    },
    progress_style(need, actual) {
      if (Number(actual) >= Number(need)) {
        return 'right:0;transform: translate(0, -50%)';
      }
      if (actual > 0) {
        let value = Math.round((Number(actual) / Number(need)) * 10000) / 100;
        return 'left:' + value + '%'
      }
      return 'left:0%';
    },
    progress_value(need, actual) {
      if (Number(actual) >= Number(need)) {
        return 100;
      }
      if (actual > 0) {
        let value = Math.round((Number(actual) / Number(need)) * 10000) / 100;
        return value
      }
      return 0;
    },
    getFrontend() {
      $http.get("plugin.commission-performance.frontend.index.index", '', '').then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        if (res.basic_info) {
          console.log("===");
          let text = res.basic_info.plugin_setting.commission_performance.plugin_name;
          this.text = text;
          this.fun.setWXTitle(text);
        } else {
          let commission_performance = JSON.parse(localStorage.getItem("yz_basic_info"))?.plugin_setting?.commission_performance;
          let text =  commission_performance.plugin_name;
          this.text = text;
          this.fun.setWXTitle(text);

        }

        let data = res.data;
        this.avatar_image = data.member.avatar_image;
        this.nickname = data.member.nickname;
        this.level_name = data.level_name;
        this.sum_commission = data.sum_commission;
        this.sum_redpack = data.sum_redpack;
        this.list = data.next_level.list;
        this.level_id = data.level_id;
        this.next_level_name = data.next_level.level_name;
        if (data.level_id == data.next_level.level_id) {
          this.full_level = true;
        }
      })
    },
    goto() {
      if (this.level_id == 0) {
        Dialog.alert({
          title: '未满足领取等级',
          confirmButtonText: "知道了"
        }).then(() => {
          // on close
        });
        return;
      }
      this.$router.push(this.fun.getUrl("new_distribution_red_packet"))
    },
  }
};
</script>

<style scoped lang="scss">
.distribution-fund {
  .tips {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.4063rem;
    background: #fff;
    padding: 0 0.8125rem 0.3125rem;

    p {
      color: #FF923B;
      padding: 0.4375rem;
      background-color: rgba(255, 245, 238, 1);
      border-radius: 0.3125rem;

    }
  }

  .left-100 {
    left: 100% !important;
  }

  .schedule-box {
    padding-bottom: 1rem;
  }

  .schedule-box:last-child {
    padding-bottom: unset;
  }

  .desc {
    padding-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5625rem;
    min-height: 2.875rem;
    margin-top: 0.0938rem;
  }

  .full_level {
    position: relative;

    .full-round-start {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      width: 0.625rem;
      height: 0.625rem;
      background: #fff;
      border-radius: 50%;
      z-index: 2;
    }

    .full-round-start-bg {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      width: 1rem;
      height: 1rem;
      background: rgba(255, 137, 36, 0.39);
      border-radius: 50%;
      opacity: 0.5;
    }
  }

  .right-15 {
    right: 1.5rem !important;
  }

  .level-3-progress {
    width: 11rem;
    height: 0.625rem;
    background: #FF923B;
    border-radius: 3.125rem;
  }

  .level-3 {
    position: absolute;
    right: 0;
    display: flex;
    transform: translateX(50%);
    flex-direction: column;
  }

  .levle-3-round-end {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0.625rem;
    height: 0.625rem;
    background: #fff;
    border-radius: 50%;
    transform: translate(20%, -50%);
    z-index: 2;
  }

  .levle-3-round-end-bg {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(20%, -50%);
    width: 1rem;
    height: 1rem;
    background: rgba(255, 137, 36, 0.39);
    border-radius: 50%;
    opacity: 0.5;
  }

  .head {
    padding: .75rem .75rem 0;
    min-height: 7.7188rem;
    background: linear-gradient(180deg, #FF8924 0%, #F5F5F5 100%);
  }

  .foot {
    margin: 0.75rem;
    background: #fff;
    border-radius: 0.3125rem;
    overflow: hidden;
  }

  .content-mount {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .get {
    position: absolute;
    top: 0;
    right: 0;
    white-space: nowrap;
    background: #F15353;
    border-radius: 100px;
    font-size: 0.625rem;
    color: #fff;
    width: 2.25rem;
    height: 1.1875rem;
    line-height: 1.1875rem;
    text-align: center;
    transform: translate(50%, -100%);

  }

  .get::after {
    content: "";
    width: 0px;
    height: 0px;
    border: 0.4375rem solid;
    border-left: 0.4375rem solid transparent;
    border-right: 0.4375rem solid transparent;
    border-bottom: 0.4375rem solid transparent;
    border-top: 0.4375rem solid #F15353;
    position: absolute;
    left: 0.1875rem;
    bottom: -0.75rem;
    transform: rotate(14deg) translateY(-18%) translateX(-32%);
  }


  .current-box {
    position: absolute;
    top: -1.2rem;
    height: 1.1875rem;
    transform: translate(-100%, -50%);
    color: #FF8924;
    padding: 0 0.5rem;
    border-radius: 0.3125rem;
    height: 1.1875rem;
    line-height: 1.1875rem;
    font-size: 0.625rem;
    background: rgba(255, 137, 36, 0.1);
    box-sizing: border-box;
    white-space: nowrap;
  }



  .total-team {
    font-size: 0.875rem;
    color: #3B3B4A;
    flex-shrink: 0;
  }

  .content-title {
    position: relative;
    height: 1rem;
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #3B3B4A;
  }

  .content-desc {
    height: 0.75rem;
    line-height: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: #AAAAB3;
  }

  .content {
    position: relative;
    background: #FFFFFF;
    border-radius: 0.3125rem;
    display: flex;
    justify-content: space-around;
    height: 3.75rem;
    margin-top: 1rem;
  }

  .content::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 2.5313rem;
    background: #E7E7E7;
  }

  .head-top-left {
    height: 3.4375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.2813rem 0.375rem;
  }

  .head-top {
    display: flex;
    align-items: center;
  }

  .level {
    // min-width: 4.875rem;
    white-space: nowrap;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.6875rem;
    border-radius: 0.5938rem;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.39);
    color: #000;
    padding: 0 0.375rem;
  }

  .member-name {
    font-size: 1.125rem;
    font-weight: bold;
    height: 1.125rem;
    line-height: 1.125rem;
    color: #FFFFFF;
  }

  .current {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #FF8924;
    background: rgba(255, 137, 36, 0.1);
    border-radius: 0.3125rem;
    height: 1.1875rem;
    line-height: 1.1875rem;
    padding: 0 0.5rem;
    font-size: 0.625rem;
  }

  .name {
    color: #6E6E79;
    font-size: 0.75rem;
    height: 0.75rem;
    line-height: 0.75rem;
    margin-top: 0.5rem;
    white-space: nowrap;
  }

  .condition {
    color: #AAAAB3;
    font-size: 0.6875rem;
    height: 0.6875rem;
    line-height: 0.6875rem;
    margin-top: 0.25rem;
    white-space: nowrap;
  }

  .full_level_box {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;

  }

  .box {
    position: absolute;
    right: 0%;
    transform: translateX(50%);
    display: flex;
    flex-direction: column;
    white-space: nowrap;
  }


  .level-3-flex {
    display: flex;
    align-items: baseline;
  }

  .main-color {
    color: #3B3B4A;
  }

  .fz-28 {
    font-size: 0.875rem;
  }

  .progress-bar {
    position: relative;
    flex: 1;
    margin-left: 0.5rem;
  }

  .level-3-progress-bar {
    position: relative;
    margin-left: 0.5rem;
  }



  .round-start {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(20%, -50%);
    width: 0.625rem;
    height: 0.625rem;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
  }

  .round-start-bg {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(28%, -50%);
    width: 1rem;
    height: 1rem;
    background: rgba(255, 137, 36, 0.39);
    border-radius: 50%;
    opacity: 0.5;
  }


  .level-1-box {
    position: absolute;
    right: 15%;
    display: flex;
    transform: translateX(50%);
    flex-direction: column;
  }



  .mt-32 {
    margin-top: 1rem;
  }

  .schedule {
    margin: 0.75rem;
    padding: 0.75rem;
    min-height: 12.5625rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.3125rem;

    .shrink {
      flex-shrink: 0;
    }

    .title {
      text-align: left;
      color: #3B3B4A;
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 2.0313rem;
    }
  }

  .right-value {
    height: 0.875rem;
    line-height: 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3B3B4A;
  }

  .label {
    height: 0.75rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: .75rem;
    color: #AAAAB3;
  }
}

.distribution-fund ::v-deep .van-tabs__line {
  background-color: #FF8924;
}

.distribution-fund ::v-deep .van-nav-bar__left .van-button {
  background-color: #FF8924;
}

.distribution-fund ::v-deep .van-nav-bar {
  background-color: #FF8924;
  border: none;
}

.distribution-fund ::v-deep .van-nav-bar .van-icon {
  color: #fff;
}

.distribution-fund ::v-deep .van-nav-bar__title {
  color: #fff;
}

::v-deep .van-progress {
  height: 0.5rem;
  background: rgba(255, 137, 36, 0.39);
}

::v-deep .van-progress__portion {
  z-index: 1;
}
</style>
